
<template>
    <div>

        <input type="text" class="content" v-model="content" placeholder="请许下你的愿望">
        <ul>
            <li v-for="(item,i) in imgList" :key="i"
            :class="borders == i ? 'addBorder' : ''" @click="get(i)" >
                <!-- 绑定的必须是变量 -->
                <img :src="item" alt="">
            </li>
        </ul>



        <input type="submit" @click="downwish" class="submit"
         :disabled='isDisabled'  v-model="submitValue" >

        <ol>
            <li v-for="(item,i) in wishList" :key="i"
            :style="{backgroundImage:'url('+item.background+')', 
            left:item.left,
            top:item.top}"
            @touchstart='touchStart($event,i)'
            @touchmove='touchMove($event,i)'
            @click="clickWish(item)"
            >{{item.content}}
                <span @click.stop="del(i)">X</span>
            </li>
        </ol>
    </div>
</template>

<script>
import img1 from  '../assets/1.jpg'
import img2 from  '../assets/2.jpg'
import img3 from  '../assets/3.jpg'
import img4 from  '../assets/4.jpg'
import img5 from  '../assets/5.jpg'
export default {
    name: 'downwish',
    data() {
        return {
            imgList:[img1,img2,img3,img4,img5],
            content:'',
            submitValue:'许愿',
            borders:-1,
            isDisabled:true,
            // 存储愿望的数组
            wishList:[],
            startX:'',
            startY:'',
            // 声明背景图
            backimg:'',
            // 是否是编辑状态
            isExit:false,
            // 存储点击的元素
            isItem:'',
        };
    },
    created() {
    },
    methods: {
        // 点击许愿
        downwish() {
            // 不是编辑状态就追加
            if(!this.isExit){
                if(this.content != '' && this.borders != -1){
                var obj = {
                    content:this.content,
                    background:this.imgList[this.borders],
                    top:parseInt(Math.random()*275)+'px',
                    left:parseInt(Math.random()*275)+'px'
                }
                this.wishList.push(obj)
                if(this.wishList.length>5){
                    this.wishList.shift()
                }
            }
            // 是编辑状态
            } else {
                this.isItem.content = this.content
                this.isItem.background = this.imgList[this.borders]
                
            }
        },
        // 点击编辑愿望
        clickWish(item) {
            this.content = item.content
            this.backimg = item.background
            // 是编辑状态
            this.isExit = true
            // 存储点击的元素
            this.isItem = item
               this.submitValue = '修改'

        },
        // 点击图片获取第几个
        get(i) {
            this.borders = i
            
        },
        // 删除
        del(i){
            this.wishList.splice(i,1)
        },
        // 开始拖拽
        touchStart(e,i) {
            // 获得点击的位置 减去 left值
            
            this.startX = e.touches[0].clientX - parseInt(this.wishList[i].left)
            this.startY = e.touches[0].clientY - parseFloat(this.wishList[i].top)
        },
        // 移动
        touchMove(e,i) {
            this.wishList[i].left = e.touches[0].pageX - this.startX + 'px'
            this.wishList[i].top = e.touches[0].pageY - this.startY + 'px'
        }
    },
    watch:{
        content() {
           if(this.isExit){                
               this.submitValue = '修改'

           }else {
                if(this.content != '' && this.borders != -1){
                this.isDisabled = false
            } else {
                this.isDisabled = true
            }
           }
        },
        borders() {
             if(this.isExit){
                if(this.content != '' && this.borders != -1){
                this.isDisabled = false
               this.submitValue = '修改'

            } else {
                this.isDisabled = true
               this.submitValue = '再想想'
            }
           }else {
                if(this.content != '' && this.borders != -1){
                this.isDisabled = false
               this.submitValue = '许愿'

            } else {
                this.isDisabled = true
               this.submitValue = '再想想'
            }
           }
        }
    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
.content{
    width: 200px;
    margin: 20px auto;
    padding-left: 15px;
    display: block;
}
ul{
    list-style: none;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 60px;
    margin: 30px 0; 
    li{
        flex-basis: 20%;
        border-radius: 50%;
        height: 60px;

        img{
            width: 100%;
            height: 60px;
            border-radius: 50%;
        }
    }
    .addBorder{
            border: 2px solid red;
    }
}
.submit{
    width: 50px;
    display: block;
    margin: 20px auto;
}
ol{
    list-style: none;
    position: relative;
    width: 100%;
    height: 300px;
    background-color: sandybrown;
    li{
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        border: salmon 1px solid;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        span{
            width: 20px;
            height: 20px;
            background-color: #ccc;
            position: absolute;
            top: 0;
            right: 0;
            text-align: center;
            line-height: 20px;
        }
    }
}
</style>
